import React, { Fragment, useState } from 'react';
import { Tabs } from 'antd';
import QueryPage from '@/components/QueryPage';
// import { get } from 'object-path';
import { withRoutePage } from '@/utils/enhanceUtils';
import RankTable from './RankTable';
import styles from './Rank.less';

const { TabPane } = Tabs;

const List = props => {
    const { location } = props;
    const { id } = location.query;
    const [activeKey, setActiveKey] = useState(id || 'applicant');
    const tabTypeMap = [
        {
            key: 'applicant',
            label: '申请发起人排行'
        },
        {
            key: 'approver',
            label: '流程审批排行'
        },
        {
            key: 'commonWorkflow',
            label: '常用流程排行'
        }
    ];
    return (
        <Fragment>
            <QueryPage
                searchBoxStyle={styles.searchBoxStyle}
                form={
                    <Tabs
                        size="large"
                        style={{ padding: '0 16px' }}
                        activeKey={activeKey}
                        onChange={key => setActiveKey(key)}
                    >
                        {tabTypeMap.map(type => (
                            <TabPane tab={type.label} key={type.key}>
                                <RankTable tabType={type.key} {...props} />
                            </TabPane>
                        ))}
                    </Tabs>
                }
            />
        </Fragment>
    );
};

export default withRoutePage(List);
